<template>
  <xh-pages>
    <view class="pages-container">
      <!-- 列表 -->
      <view class="list" v-if="datalist.length">
        <view class="item" v-for="(item,index) in datalist" :key="index">
          <view class="label">
            <view class="icon pt-icon-weibiaoti-"></view>
            <view class="text">
              <view class="remarks">分销收益</view>
              <view class="time">{{ item.create_at }}</view>
            </view>
          </view>
          <view class="value inc">
            + {{ item.money }}
          </view>
        </view>
      </view>
      <view class="empty-container">
        <u-empty mode="list" textColor="#666" textSize="14" icon="/static/empty-new.png" />
      </view>
    </view>
  </xh-pages>
</template>
    
<script setup lang="ts">
const datalist = ref<any[]>([])

const getList = ()=>{
  uni.$u.http.get('DealerBill/index').then((res:any)=>{
    const list = res?.data?.data ?? []
    datalist.value = list
  })
}

onLoad(()=>{
  getList()
})
</script>
    
<style scoped lang="scss">
.pages-container {

  .list {
    margin-bottom: 20rpx;

    .item {
      padding: 30rpx;
      border-top: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      background: #fff;

      .label {
        display: flex;
        align-items: center;

        .icon {
          font-size: 60rpx;
          padding-right: 20rpx;
        }

        .text {
          font-size: 28rpx;
          color: #666;

          .remarks {
            font-size: 28rpx;
            color: #333;
          }

          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .value {
        display: flex;
        align-items: center;
        font-size: 34rpx;
      }

      .inc {
        color: #17c178;
      }

      .dec {
        color: #ff0000;
      }
    }
  }
}

.empty-container {
  padding: 100rpx 0;
  border-top: 1px solid #e5e5e5;
}
</style>
    